<template>
  <div class="prize">
    <div ref="swiper" class="swiper-container swiper-container-horizontal swiper-container-free-mode swiper-container-android">
      <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide-active" v-for="(item,index) in arr_data">
          <div class="slideIn" >
            <div class="prizeImage"><img class="num"
                                         :src="item.icon"
                                         alt="">
              <div class="prizeBorder"><img
                :src="item.url"
                alt=""></div>
            </div>
            <p class="prizeName">{{item.name}} </p></div>
        </div>

      </div>
      <!-- Add scrollbar -->
      <div class="swiper-scrollbar"></div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  var one=require('../../static/images/1.png')
  var two=require('../../static/images/2.png')
  var thr=require('../../static/images/3.png')
  var four=require('../../static/images/4.png')
  var five=require('../../static/images/5.png')

  var iphonex_pic = require('../../static/images/iphonex.png')
  var money_b=require('../../static/images/500.png')
  var xiaomi=require('../../static/images/xiaomi.png')
  var money_l=require('../../static/images/88.png')
  var lucky=require('../../static/images/gift.png')
  var thanks=require('../../static/images/thanks.png')

  import swiperAsync from 'swiper'
  export default {
    name:'Bottom',
    data () {
      return {
        arr_data:[{name:'0元购iPhoneX',url:iphonex_pic,icon:one},
                  {name:'500元',url:money_b,icon:two},
                  {name:'小米mix2',url:xiaomi,icon:thr},
                  {name:'88元',url:money_l,icon:four},
                  {name:'幸运奖',url:lucky,icon:five},
                  ]
      }
    },
    methods: {
      async _initSwiper() {
        let Swiper = await swiperAsync; //异步加载的
        const container = this.$refs.swiper; //ref='swiper'
        const config = {  //swiper的参数配置
          autoplayDisableOnInteraction: !1,
          freeMode: !0,
          spaceBetween: 0,
          slidesPerView: 4,
          slidesOffsetBefore: 10,
          scrollbar:".swiper-scrollbar",
          scrollbarHide: !1,
        };
        this.mySwiper = new Swiper(container, config);
      },
    },
    mounted(){
      this._initSwiper();
    }
  }
</script>

<style>
  @import '../../../node_modules/swiper/dist/css/swiper.min.css';
  .prize {
    padding-top: 0.75rem;
    width: 100%;
    height: 6.75rem;
    background: url('../../static/images/bg_bottom.png') no-repeat center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
  }

  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    height: 5.75rem;
    margin-right: 0;
  }

  .slideIn {
    width: 4.25rem;
    height: 5.75rem;
  }

  .prizeImage {
    position: relative;
    width: 100%;
    height: 4.25rem;
  }

  .num {
    position: absolute;
    left: 0;
    top: 0.25rem;
    z-index: 2;
    width: 1.225rem;
    height: 1.225rem;
  }

  .prizeBorder {
    position: absolute;
    left: 0.225rem;
    top: 0.5rem;
    z-index: 1;
    width: 3.75rem;
    height: 3.75rem;
    text-align: center;
    line-height: 3.75rem;
    background: url('../../static/images/kuang.png') no-repeat center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
  }

  .prizeBorder img {
    vertical-align: middle;
    width: 3rem;
    height: 3rem;
  }

  .prizeName {
    width: 100%;
    height: 1.5rem;
    line-height: 1.75rem;
    font-size: .2rem;
    color: #fff;
    text-align: center;
  }
</style>
